<template>
  <div class="dd">
    <div class="d1">
      <img src="@/views/wzz/login/img/logo.png" alt="" class="i1">
    </div>
    <div class="d2">
      <img src="@/views/wzz/login/img/bcgd.jpg" alt="" width="100%" height="494px">
      <div class="da">
        <span class="s9" @click="mm()">账号密码登录</span><span class="s10" @click="yz()">验证码登录</span>
       <!-- 密码登录 -->
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="userForm" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm" id="ff1">
          <el-form-item prop="phone">
            <el-input v-model="userForm.phone" style="height: 38px" placeholder="请输入手机号"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password type="password" v-model="userForm.password" style="height: 38px" placeholder="请输入密码"/>
            <el-checkbox class="checkbox" v-model="isCheck" >
              <span class="s1">30天内自动登录</span>
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <span class="ss" @click="dl()">登录</span>
            <router-link to="/register" class="ab">新用户注册</router-link><a href="" class="aa">忘记密码</a>
          </el-form-item>
        <ul>
          <li><a href="javascript:void(0)" class="a1"></a></li>
          <li><a href="javascript:void(0)" class="a2"></a></li>
          <li><a href="javascript:void(0)" class="a3"></a></li>
          <li><a href="javascript:void(0)" class="a4"></a></li>
        </ul>
        <p style="margin-top: 5px">
          <el-checkbox class="checkbox" v-model="isChecked">
            <span class="s8">登录即代表您已阅读并同意《服务协议及隐私政策》</span>
          </el-checkbox>
        </p>
        </el-form>
       <!-- 短信登录-->
        <el-form style="max-width: 600px" :model="yzm" status-icon :rules="rules" label-width="auto" class="demo-ruleForm" id="ff2">
          <el-form-item prop="phone">
            <el-input v-model="yzm.phone" style="height: 38px" placeholder="请输入手机号"/>
          </el-form-item>
          <el-form-item prop="code" style="display: flex">
            <el-input v-model="yzm.code" style="width: 150px;height: 38px"/>
            <span class="sa" @click="pd1()">获取验证码</span>
          </el-form-item>
          <el-form-item>
            <span class="ss" @click="dl2()">登录</span>
            <a href="" class="abb" >新用户注册</a>
          </el-form-item>
          <ul>
            <li><a href="" class="a1"></a></li>
            <li><a href="" class="a2"></a></li>
            <li><a href="" class="a3"></a></li>
            <li><a href="" class="a4"></a></li>
          </ul>
          <p style="margin-top: 10px">
            <el-checkbox class="checkbox" v-model="isChecked">
              <span class="s8">登录即代表您已阅读并同意《服务协议及隐私政策》</span>
            </el-checkbox>
          </p>
        </el-form>
      </div>
    </div>
    <div class="d3">
      <p class="p1">Copyright&nbsp;&copy;&nbsp;2002-2025 版权所有 同程网络科技股份有限公司 苏ICP证B2-20100204</p>
    </div>
  </div>
</template>

<script>
import {login,pd,sendCode,yz} from "@/api/wzz/vue3.js";
import { useCounterStore } from "@/stores/counter";
import {mapActions} from "pinia";


export default {
  name: 'Login',
  data(){
    return{
      userForm:{
        phone:"",
        password:""
      },
      isChecked:false,
      isCheck:false,
      yzm:{
        phone: "",
        code: ""
      },
      rules: {
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 6, message: '请输入正确的密码', trigger: 'blur'}
        ]
      }
    }
  },
  methods : {
    ...mapActions(useCounterStore, ['setToken']),//获取pinia中的方法
    ...mapActions(useCounterStore, ['setUserForm']),//获取pinia中的方法

    yz() {
      var s9 = document.getElementsByClassName("s9")[0]
      s9.style.border = 'none'
      s9.style.color = '#333'
      s9.style.fontSize = '14px'
      var s10 = document.getElementsByClassName("s10")[0]
      s10.style.borderBottom = '2px solid #00C777'
      s10.style.color = '#00C777'
      s10.style.fontSize = '16px'
      document.getElementById("ff1").style.display = "none"
      document.getElementById("ff2").style.display = "block"
    },
    mm() {
      var s9 = document.getElementsByClassName("s9")[0]
      s9.style.borderBottom = '2px solid #00C777'
      s9.style.color = '#00C777'
      s9.style.fontSize = '16px'
      var s10 = document.getElementsByClassName("s10")[0]
      s10.style.border = 'none'
      s10.style.color = '#333'
      s10.style.fontSize = '14px'
      document.getElementById("ff1").style.display = "block"
      document.getElementById("ff2").style.display = "none"
    },

    //注册


    dl() {//密码登录
      if (this.isChecked != true || this.isCheck != true) {
        ElMessage({
          message: '请勾选同意',
          type: 'error',
        })
      } else {
        if (this.userForm.username == "" || this.userForm.password == "") {//判断是否为空
          ElMessage({
            message: '请填写信息',
            type: 'warning',
          })
        } else {
          login(this.userForm).then(res => {
            console.log(res)
            if (res.data.code == 222) {
              ElMessage({
                message: '用户名或密码错误',
                type: 'error',
              })
            } else if (res.data.code == 200) {
              ElMessage.success('登录成功')
              const store = useCounterStore();//调用pinia
              store.setUserForm(res.data.data.data)//设置用户信息
              this.setToken(res.data.data.token)//设置token
              this.$router.push({path: '/main'})
            } else if( res.data.code == 221) {
              ElMessage.error('该用户已被封禁')
            }
            else {
              ElMessage({
                message: '用户不存在',
                type: 'warning',
              })
            }
          })
        }
      }
    },
    hq() {//获取验证码
      sendCode(this.yzm.phone).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          ElMessage({
            message: '发送成功',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '发送失败',
            type: 'error',
          })

        }
      })
    },
    pd1() {//判断手机号是否注册
      this.hq()
    },
    dl2() {//验证码点击登录
      if (this.isChecked !== true) {
        ElMessage({
          message: '请勾选同意',
          type: 'error',
        })
      } else {
        if (this.yzm.code == '' || this.yzm.phone == '') {
          ElMessage({
            message: '请输入手机号和验证码',
            type: 'error',
          })
        } else {
          yz(this.yzm.phone, this.yzm.code).then(res => {
            console.log(res)
            if (res.data.data.code == 444) {
              ElMessage({
                message: '验证码错误',
                type: 'error',
              })
            } else {
              ElMessage({
                message: '登录成功',
                type: 'success',
              })
              this.$router.push( '/main')
              console.log(res.data.data.data)
              const store = useCounterStore();//调用pinia
              store.setUserForm(res.data.data.data)
              // this.setUserForm(res.data.data.data)//设置用户信息
              this.setToken(res.data.data.token)//设置token
            }
          })
        }
      }

    }
  }
}
</script>

<style scoped>
.dd{
  width: 100%;
  height: 100%;
}
.d1{
  width: 100%;
  height: 100px;
  background-color: white;
}
.d2{
  position: relative;
  width: 100%;
  height: 494px;
}
.d3{
  width: 100%;
  height: 100px;
}
.i1{
  margin-left: 150px;
  margin-top: 5px;
}
.p1{
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-top: 30px;
}
.da{
  width: 380px;
  height: 434px;
  background-color:white;
  position: absolute;
  z-index: 5;
  top: 25px;
  right: 150px;
}
.el-form{
  margin-right: 40px;
  margin-left: 40px;
  margin-top: 40px;
}
.ss{
  display: block;
  width: 300px;
  height: 44px;
  background: linear-gradient(-90deg, #00bf67, #00bf69);
  text-align: center;
  border-radius: 3px;
  line-height: 44px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
ul{
  width: 300px;
  display: flex;
  justify-content:space-around;
}
.a1{
  display: inline-block;
  background: url("@/views/wzz/login/img/tb.png")2px 1px no-repeat;
  width: 40px;
  height: 40px;
}
.a2{
  display: inline-block;
  background: url("@/views/wzz/login/img/tb.png")2px -47px no-repeat;
  width: 40px;
  height: 40px;
}
.a3{
  display: inline-block;
  background: url("@/views/wzz/login/img/tb.png")2px -100px no-repeat;
  width: 40px;
  height: 40px;
}
.a4{
  display: inline-block;
  background: url("@/views/wzz/login/img/tb.png")2px -152px no-repeat;
  width: 40px;
  height: 40px;
}
.a1:hover{
  background: url("@/views/wzz/login/img/tb.png")-50px 1px no-repeat;
}
.a2:hover{
  background: url("@/views/wzz/login/img/tb.png")-50px -47px no-repeat;
}
.a3:hover{
  background: url("@/views/wzz/login/img/tb.png")-50px -100px no-repeat;
}
.a4:hover{
  background: url("@/views/wzz/login/img/tb.png")-50px -152px no-repeat;
}
.s8{
  font-size: 12px;
  color: #999;
}
.s9{
  line-height: 42px;
  color: #00C777;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 2px solid #00C777;
  display: inline-block;
  width: 96px;
  height: 43.6px;
  margin-left: 80px;
  margin-top: 25px;
  text-align: center;
  margin-right: 40px;
}
.s10{
  line-height: 42px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  width: 96px;
  height: 43.6px;
  text-align: center;
}
.s1{
  font-size: 12px;
  color: #666;
  cursor: pointer;
}
.aa{
  font-size: 12px;
  color: #666;
  text-decoration: none;
}
.ab{
  font-size: 12px;
  color: #666;
  text-decoration: none;
  margin-right: 190px;
}
.abb{
  font-size: 12px;
  color: #666;
  text-decoration: none;
  margin-right: 190px;
  margin-bottom: 20px;
}
#ff2{
  display: none;
}
.sa{
  display: inline-block;
  width: 112px;
  height: 38px;
  text-align: center;
  line-height: 38px;
  background: #eee;
  color: #333;
  font-size: 14px;
  border-radius: 2px;
  margin-left: 35px;
  cursor: pointer;
}
</style>